<template>
<div class="tab-container" style="background: #fff;">

  <el-row :gutter="24">
    <el-col :span="12">
      <div style="display:flex;justify-content:center; align-items:Center;">
        <p>选择时间段：</p>
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']" value-format="timestamp">
        </el-date-picker>
        <el-button size="medium" icon="el-icon-search" style="margin-left:20px" @click="search">查询</el-button>
      </div>
    </el-col>
  </el-row>

  <div class="textl" style="font-size:14px;height:100%;padding: 40px;">

    <el-row :gutter="24" style="font-size: 12px;height:100%">

      <el-col :span="10" style="background: #fff; cursor: pointer;height:100%">
        <div class="" style="width: 300px;height: 100px;margin: 0 auto;background: #ccc;display:flex;justify-content:center; align-items:Center;text-align:center;">
          <span style="flex:2;text-align:right;color: #fff;font-size: 20px;">实时发起数统计</span>
          <span @click="Toexpert2('activeManage')" style="flex:1;font-size: 24px;color: #409EFF;text-align:center;">{{allMeeting || 0}}</span>
        </div>
        <div class="" style="width: 450px;height:340px;margin: 0 auto;display:flex;justify-content:center; align-items:Center;text-align:center;">
          <line-chart ref="chart1" :chartData="input" v-on:childByValue="childByValue"></line-chart>
        </div>
      </el-col>
      <el-col :span="10" style="background: #fff;cursor: pointer;height:100%">
        <div class="" style="width: 300px;height: 100px;margin: 0 auto;background: #ccc;display:flex;justify-content:center; align-items:Center;text-align:center;">
          <span style="flex:2;text-align:right;color: #fff;font-size: 20px;">实时成功数统计</span>
          <span @click="Toexpert2('activeManage')" style="flex:1;font-size: 24px;color: #409EFF;text-align:center;">{{allSuccessMeeting || 0}}</span>
        </div>
        <div class="" style="width: 450px;height:340px;margin-left:20%">
          <pie-chart ref="chart2" :chartData="input" v-on:childByValue2="childByValue2"></pie-chart>
        </div>
      </el-col>


    </el-row>


  </div>
</div>

</div>
</template>

<script>
import lineChart from './components/lineChart'
import pieChart from './components/pieChart'
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import {
  pca,
  pcaa
} from "@/components/area-data";
import {
  gettjlib,
} from '@/api/statistics'
export default {
  components: {
    pieChart,
    lineChart,
  },
  data() {
    return {
      input: {
        site1: true,
        site2: '',
        site3: '',
        domain: '1',
        sex: '1',
        education: '1',
        degree: '1',
        sites1: '',
        sites2: '',
        sites3: '',
        domains: '',
        sexs: '',
        educations: '',
        degrees: '',
        // 开始时间
        startDateTime: '',
        // 结束时间
        endDateTime: ''
      },
      pca: pcaa, //最多省市区三级，结合:level='2'选择，0省、1省市、2省市区
      arrValue1: [],
      arrValue2: [],
      arrValue3: [],
      allMeeting: '',
      allSuccessMeeting: '',
      timeRange:''
    }
  },

  mounted() {
    // this.loadOneTree()
  },
  methods: {
    search(){
      this.loadOneTree();
      if (this.timeRange) {
        let startDateTime = this.timeRange[0];
        let endDateTime = this.timeRange[1];
        this.input.startDateTime = startDateTime;
        this.input.endDateTime = endDateTime;
      } else {
        this.input.startDateTime = null;
        this.input.endDateTime = null;
      }
      this.$refs.chart1.initChart(this.input);
      this.$refs.chart2.initChart(this.input);
    },
    loadOneTree() {
      let pcadata = this.pca
      let arr = []
      for (var i in pcadata) {
        if (i == '86') {
          let obj = {}
          obj.date = i
          obj.value = pcadata[i]
          arr.push(obj)
        }
      }
      arr = arr[0].value
      for (var j in arr) {
        let obj = {}
        obj.name = j
        obj.value = arr[j]
        this.arrValue1.push(obj)
      }
    },
    loadtwoTree(oneData) {
      this.arrValue2 = []
      let pcadata = this.pca
      let arr = []
      for (var i in pcadata) {
        if (i == oneData) {
          let obj = {}
          obj.date = i
          obj.value = pcadata[i]
          arr.push(obj)
        }
      }
      arr = arr[0].value
      for (var j in arr) {
        let obj = {}
        obj.name = j
        obj.value = arr[j]
        this.arrValue2.push(obj)
      }
    },
    loadThreeTree(oneData) {
      this.arrValue3 = []
      let pcadata = this.pca
      let arr = []
      for (var i in pcadata) {
        if (i == oneData) {
          let obj = {}
          obj.date = i
          obj.value = pcadata[i]
          arr.push(obj)
        }
      }
      if (arr.length > 0) {
        arr = arr[0].value
        for (var j in arr) {
          let obj = {}
          obj.name = j
          obj.value = arr[j]
          this.arrValue3.push(obj)
        }
      }

    },
    childByValue: function(childValue) {
      // childValue就是子组件传过来的值
      this.allMeeting = childValue
    },
    childByValue2: function(childValue) {
      // childValue就是子组件传过来的值
      this.allSuccessMeeting = childValue
    }
  }
}
</script>

<style lang="scss">
.txselect .el-checkbox+.el-checkbox {
    margin-right: 30px;
    margin-left: 0;
}
.txselect .el-checkbox {
    margin-right: 30px;
    margin-left: 0;
}
.txselect .el-select {
    margin: 5px;
}
.txselect .el-input--suffix .el-input__inner {
    padding-right: 20px;
}
</style>
